<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>口红</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 350px;
            margin: auto;
            text-align: center;
        }

        img {
            width: 350px;
            height: 500px;
        }

        p {
            text-align: center;
        }

        input:nth-of-type(1),
        input:nth-of-type(3) {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <img src="../images/2.jpg" alt="">
        <br>
        <p>口红</p>
        <p>
            <span>单价￥:</span>
            <span id="price">340</span>
        </p>
        <input type="button" value=" - ">
        <input type="text" value="0">
        <input type="button" value=" + ">
        <p>
            <span>总价￥:</span>
            <span id="total">0</span>
        </p>
    </div>
</body>
<script>
    (function () {
        let cut = document.querySelectorAll('input')[0];
        let num = document.querySelectorAll('input')[1]
        let add = document.querySelectorAll('input')[2];
        let price = document.getElementById('price');
        let total = document.getElementById('total');

        cut.addEventListener('click', function () {
            let current = num.value;
            current--;
            num.value = current;
            if (current <= 0) num.value = 0;
            count();
            console.log(price.innerHTML)
        })

        add.addEventListener('click', function () {
            let current = num.value;
            current++;
            num.value = current;
            count();
        })

        function count() {
            total.innerHTML = 1 * num.value * price.innerHTML;
        }







    })();
</script>

</html>